<template>
	<div class="padding">
		<div v-if="tableParam.isShoweds.isSearch">
			<queryTable :queryTables="tableParam.queryTables" @search-click="btnClick"
      ref="queryTableDom"
       @reSet-click="btnClick" @selectChange="selectChange">

      </queryTable>
		</div>
		<!-- 操作按钮 -->
		<div class="box-body" style="background-color: white; padding-top:30px">
			<el-row v-show="tableParam.isShoweds.showToolTitle" style="background-color: #F6F8F9; padding-right: 10px" type="flex" align="middle">
				<el-col :span="10" style="border-left: 2px solid #27A163; line-height: 36px">
					<h2 style="padding-left: 10px; color: #333">{{tableParam.title ? tableParam.title : getPageTitle()}}</h2>
				</el-col>
				<el-col :span="14" align="right">
					<slot name="toolBtns"></slot>
					<slot name="toolRightInfo"></slot>
				</el-col>
			</el-row>
			<el-row class="allBtns">
				<slot name="allBtns"></slot>
			</el-row>

			<!-- table表格组件 -->
			<!-- v-if="tableParam.isShoweds.tableIsShow===1" -->
			<div v-if="tableParam.isShoweds.tableIsShow===1" style="margin-top: 15px">
				<!--
          避免报错 删除了 3个方法
          @selection-change="handleSelectionChange"
          @select="handleSelect" 
          @select-all="handleSelectAll"
        -->

				<el-table :data="tableParam.tableData" ref="multipleTable" :highlight-current-row="tableParam.isShoweds.isRadio" @current-change="handleCurrentChange" @selection-change="handleSelectionChange" @select="handleSelect" @select-all="handleSelectAll" size="mini" stripe border>
					<template v-if="!tableParam.isShoweds.isRadio">
						<el-table-column v-if="tableParam.isShoweds.tableIsAllChange" fixed="left" type="selection" width="54" align="center">
						</el-table-column>
					</template>

					<el-table-column v-for="(item,index) in tableParam.tableLables" :key="index" :label="item.lable" align="center" :fixed="item.fixed" :width="item.width" v-if="!item.hidden" :show-overflow-tooltip="item.isHiddle">
						<template slot-scope="scope">
							<template v-if="item.linked">
								<el-button type="text" size="small" @click="btnClick(item.code,scope.row)">
									{{scope.row[item.code]}}
								</el-button>
							</template>

							<template v-else-if="item.type=='input_number_0'">
								<span>
		                			<el-input class="txt-right" size="small" v-model="scope.row[item.code]" placeholder="请输入内容" @change="input_number_0(scope.$index, scope.row,item.code)"></el-input>
		                		</span>
							</template>

							<!--新增操作栏-->
							<el-col v-else-if="item.code === 'operateColumn'" size="medium" align="center">
								<template v-for="btn in item.btns">
									<el-button style="margin-right: 5px" :type="btn.type" @click="operateColumnClick(btn.operateType,scope.row)">{{btn.name}}
									</el-button>
								</template>
							</el-col>
							<el-col v-else size="medium" align="center">
								{{ scope.row[item.code] || scope.row[item.code] === 0 ? scope.row[item.code] : '--' }}
							</el-col>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div v-else-if="tableParam.isShoweds.tableIsShow===2" style="text-align:center;;display:block;">
				<span class="iconfont" style="margin-top:40px;display:block">&#xe636;</span>
				<br>
				<span style="margin-top:40px;display:block">无订单...</span>
			</div>
			<div v-else style="text-align:center;;display:block;">
        <span class="iconfont" style="margin-top:40px;display:block">&#xe636;</span>
        <br>
        <span style="margin-top:40px;display:block">你的队列中暂时没有可处理的单子...</span>
      </div>
			<el-row>
				<!-- 分页组件 -->
				<span class="textCenter" v-if="tableParam.isShoweds.pageIsShow">
        <el-pagination
          @size-change="btnClick('size_change',$event)"
          @current-change="btnClick('current_change',$event)"
          :current-page="tableParam.pageHelpers.currentPage"
          :page-size="tableParam.pageHelpers.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableParam.pageHelpers.totalSum"
          :page-count="Math.ceil(Number(tableParam.pageHelpers.totalSum /10))"
          :background="true">
        </el-pagination>
        </span>
			</el-row>
		</div>
	</div>
</template>
<script>
	import QueryTable from './queryTable.vue'
	import { deleteSame, deleteSame2 } from '@/utils'

	export default {
		props: {
			tableItems: {}
		},

		data() {
			return {
				showTimePicker: false,
				endTime: '',
				currRow: '',
				selections: [], // 多选项
				tableParam: this.$props.tableItems,
				isAllCheck: false, // 当前是否处于跨页全选状态
				uncheck: [], // 未被选中的key, 当前是否处于跨页全选状态下有效
				uncheckObj: [], // 未被选中的对象, 当前是否处于跨页全选状态下有效
				operateAllList: [], // 被操作过的列表
				operateSelect: [], // 被操作过的列表选中的值
				allCheckSelections: [], // 被全选的值
				tableKey: this.$props.tableItems.tableKey ? this.$props.tableItems.tableKey : 'caseNo', // table的key值
				audioStop: false,
				remarkList: [], // 备注的日志列表
				selectResult: [], //得到单选的值
			};
		},
		created() {
			this.getPageTitle()
		},
		methods: {
      /*清空查询的值*/
      clearValue(){
        this.$refs.queryTableDom.reSet();
      },
			/* 表格单选点击事件 */
			handleCurrentChange(val) {
				if(this.tableParam.isShoweds.isRadio) {
					this.selectResult = val;
					this.$emit('getSelections', val);
				}
			},
			input_number_0(index, row, code) {
				try {
					var floatV = parseFloat(row[code] + "");
					if(isNaN(floatV)){
						row[code] = 0;
						this.$message({
                message: '输入值非法，请输入正确的数值.'
              });
						return false;
					}else{
						floatV = floatV.toFixed(2);
						row[code] = floatV;
						return true;
					}
					
				} catch(e) {
					row[code] = 0;
					this.$message({
                message: '输入值非法，请输入正确的数值.'
              });
					return false;
				}
				console.log(index, row);
			},
			/* 多选 */
			handleSelectionChange(val) {
				if(this.tableParam.isShoweds.tableIsAllChange) {
					this.$emit('getSelectionsMore', val);
				}
			},
			selectChange(value, currLabel) {
				this.$emit('selectChange', value, currLabel)
			},
			getPageTitle() {
				return this.$route.meta.title
			},
			/* 操作栏点击 */
			operateColumnClick(operateType, data) {
				this.$emit('operate-column-click', operateType, data)
			},
			btnClick(key, data) {
				this.$emit("btn-click", key, data); //监听事件
			},
			handleSelect(selection, row) {
				// console.log(selection);
				// console.log(row);
				this.selectResult = selection;
				if(this.isAllCheck) {
					let flag = 0;
					for(let i in selection) {
						if(row[this.tableKey] === selection[i][this.tableKey]) {
							flag = 1
							break;
						}
					}
					if(flag === 1) {
						this.operateSelect.push(row);
					} else {
						for(let i in this.operateSelect) {
							if(this.operateSelect[i][this.tableKey] === row[this.tableKey])
								this.operateSelect.splice(i, 1);
						}
					}

					this.getUncheckSelection()
				}
			},
			handleSelectAll(selection) {
				this.selectResult = selection;
				if(this.isAllCheck) {
					if(selection.length === 0) {
						for(let i in this.tableParam.tableData) {
							for(let j in this.operateSelect) {
								if(this.operateSelect[j][this.tableKey] === this.tableParam.tableData[i][this.tableKey]) {
									this.operateSelect.splice(j, 1);
									break;
								}
							}
						}
					}
					if(this.operateSelect.length === 0) {
						for(let i in selection) {
							this.operateSelect.push(selection[i]);
						}
					} else {
						for(let i in selection) {
							let flag = false;
							for(let j in this.operateSelect) {
								if(this.operateSelect[j][this.tableKey] === selection[i][this.tableKey]) {
									flag = true;
									break;
								}
							}
							if(!flag)
								this.operateSelect.push(selection[i]);
						}
					}

					this.getUncheckSelection()
					this.$emit('selection', selection)
				}
			},

		},

		computed: {},

		components: {
			QueryTable
		}

	}
</script>

<style>
	.txt-right .el-input__inner {
		text-align: right;
	}
	
	.txt-left .el-input__inner {
		text-align: left;
	}
	
	.txt-center .el-input__inner {
		text-align: center;
	}
	
	.textCenter {
		display: flex;
		justify-content: flex-end;
		/* 水平右对齐 */
		align-items: center;
		/* 垂直居中 */
		margin-top: 20px;
	}
	
	.padding {
		padding: 15px;
	}
	
	.form-label .el-dialog__body .el-form,
	.el-dialog__body .el-form-item__label {
		color: #000;
	}
	
	@font-face {
		font-family: 'iconfont';
		/* project id 525570 */
		src: url('//at.alicdn.com/t/font_525570_0j1bppjmhuayvi.eot');
		src: url('//at.alicdn.com/t/font_525570_0j1bppjmhuayvi.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_525570_0j1bppjmhuayvi.woff') format('woff'), url('//at.alicdn.com/t/font_525570_0j1bppjmhuayvi.ttf') format('truetype'), url('//at.alicdn.com/t/font_525570_0j1bppjmhuayvi.svg#iconfont') format('svg');
	}
	
	.iconfont {
		font-family: "iconfont";
		font-size: 160px;
		font-style: normal;
	}
	
	.el-dialog--center .el-dialog__header {
		padding-top: 15px;
	}
	
	.icon-tel:before {
		content: "\e601";
	}
	
	.lay-tag {
		background-color: #3C8DBC;
		/* 补 表示补件订单 */
		height: 20px;
		width: 20px;
		padding: 0;
		line-height: 19px;
		font-size: 12px;
		color: #fff;
		border-radius: 4px;
		text-align: center;
		box-sizing: border-box;
		border: none;
		margin: 2px 4px;
	}
	
	.border-red {
		padding: 0 3px;
		border: 1px solid #f00;
		font-size: 12px;
		color: #f00;
		margin-left: 3px;
	}
	
	.allBtns {
		margin-top: 10px;
		margin-bottom: 10px
	}
</style>